<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CanvasTarget - Three.js Docs</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<script src="../scripts/highlight.min.js"></script>
	<link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
	<link type="text/css" rel="stylesheet" href="../styles/page.css">
</head>
<body>
		<p class="inheritance" translate="no"><a href="EventDispatcher.html">EventDispatcher</a> → </p>
	<h1 translate="no">CanvasTarget</h1>
		<section>
			<header>
				<div class="class-description"><p>CanvasTarget is a class that represents the final output destination of the renderer.</p></div>
			</header>
			<article>
				<div class="container-overview">
					<h2>Constructor</h2>
					<h3 class="name name-method" id="CanvasTarget" translate="no">new <a href="#CanvasTarget">CanvasTarget</a><span class="signature">( domElement : <span class="param-type">HTMLCanvasElement | OffscreenCanvas</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Constructs a new CanvasTarget.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>domElement</strong>
									</td>
									<td class="description last">
										<p>The canvas element to render to.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<h2 class="subsection-title">Properties</h2>
				<div class="member">
					<h3 class="name" id="colorTexture" translate="no">.<a href="#colorTexture">colorTexture</a><span class="type-signature"> : <a href="FramebufferTexture.html">FramebufferTexture</a></span> </h3>
					<div class="description">
						<p>The color texture of the default framebuffer.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="depthTexture" translate="no">.<a href="#depthTexture">depthTexture</a><span class="type-signature"> : <a href="DepthTexture.html">DepthTexture</a></span> </h3>
					<div class="description">
						<p>The depth texture of the default framebuffer.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="domElement" translate="no">.<a href="#domElement">domElement</a><span class="type-signature"> : HTMLCanvasElement | OffscreenCanvas</span> </h3>
					<div class="description">
						<p>A reference to the canvas element the renderer is drawing to.
This value of this property will automatically be created by
the renderer.</p>
					</div>
				</div>
				<h2 class="subsection-title">Methods</h2>
					<h3 class="name name-method" id="dispose" translate="no">.<a href="#dispose">dispose</a><span class="signature">()</span> </h3>
					<div class="method">
						<div class="description">
							<p>Frees the GPU-related resources allocated by this instance. Call this
method whenever this instance is no longer used in your app.</p>
						</div>
						<h5>Fires:</h5>
						<ul>
							<li>RenderTarget#event:dispose</li>
						</ul>
					</div>
					<h3 class="name name-method" id="getDrawingBufferSize" translate="no">.<a href="#getDrawingBufferSize">getDrawingBufferSize</a><span class="signature">( target : <span class="param-type"><a href="Vector2.html">Vector2</a></span> )</span><span class="type-signature"> : <a href="Vector2.html">Vector2</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Returns the drawing buffer size in physical pixels. This method honors the pixel ratio.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>target</strong>
									</td>
									<td class="description last">
										<p>The method writes the result in this target object.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> The drawing buffer size.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="getPixelRatio" translate="no">.<a href="#getPixelRatio">getPixelRatio</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
					<div class="method">
						<div class="description">
							<p>Returns the pixel ratio.</p>
						</div>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> The pixel ratio.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="getScissor" translate="no">.<a href="#getScissor">getScissor</a><span class="signature">( target : <span class="param-type"><a href="Vector4.html">Vector4</a></span> )</span><span class="type-signature"> : <a href="Vector4.html">Vector4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Returns the scissor rectangle.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>target</strong>
									</td>
									<td class="description last">
										<p>The method writes the result in this target object.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> The scissor rectangle.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="getScissorTest" translate="no">.<a href="#getScissorTest">getScissorTest</a><span class="signature">()</span><span class="type-signature"> : boolean</span> </h3>
					<div class="method">
						<div class="description">
							<p>Returns the scissor test value.</p>
						</div>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> Whether the scissor test should be enabled or not.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="getSize" translate="no">.<a href="#getSize">getSize</a><span class="signature">( target : <span class="param-type"><a href="Vector2.html">Vector2</a></span> )</span><span class="type-signature"> : <a href="Vector2.html">Vector2</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Returns the renderer's size in logical pixels. This method does not honor the pixel ratio.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>target</strong>
									</td>
									<td class="description last">
										<p>The method writes the result in this target object.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> The renderer's size in logical pixels.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="getViewport" translate="no">.<a href="#getViewport">getViewport</a><span class="signature">( target : <span class="param-type"><a href="Vector4.html">Vector4</a></span> )</span><span class="type-signature"> : <a href="Vector4.html">Vector4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Returns the viewport definition.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>target</strong>
									</td>
									<td class="description last">
										<p>The method writes the result in this target object.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> The viewport definition.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="setDrawingBufferSize" translate="no">.<a href="#setDrawingBufferSize">setDrawingBufferSize</a><span class="signature">( width : <span class="param-type">number</span>, height : <span class="param-type">number</span>, pixelRatio : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>This method allows to define the drawing buffer size by specifying
width, height and pixel ratio all at once. The size of the drawing
buffer is computed with this formula:</p>
<pre><code class="language-js">size.x = width * pixelRatio;
size.y = height * pixelRatio;
</code></pre>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>width</strong>
									</td>
									<td class="description last">
										<p>The width in logical pixels.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>height</strong>
									</td>
									<td class="description last">
										<p>The height in logical pixels.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>pixelRatio</strong>
									</td>
									<td class="description last">
										<p>The pixel ratio.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h3 class="name name-method" id="setPixelRatio" translate="no">.<a href="#setPixelRatio">setPixelRatio</a><span class="signature">( value : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets the given pixel ratio and resizes the canvas if necessary.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>value</strong>
									</td>
									<td class="description last">
										<p>The pixel ratio.</p>
										<p>Default is <code>1</code>.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h3 class="name name-method" id="setScissor" translate="no">.<a href="#setScissor">setScissor</a><span class="signature">( x : <span class="param-type">number | <a href="Vector4.html">Vector4</a></span>, y : <span class="param-type">number</span>, width : <span class="param-type">number</span>, height : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Defines the scissor rectangle.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>x</strong>
									</td>
									<td class="description last">
										<p>The horizontal coordinate for the lower left corner of the box in logical pixel unit.
Instead of passing four arguments, the method also works with a single four-dimensional vector.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>y</strong>
									</td>
									<td class="description last">
										<p>The vertical coordinate for the lower left corner of the box in logical pixel unit.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>width</strong>
									</td>
									<td class="description last">
										<p>The width of the scissor box in logical pixel unit.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>height</strong>
									</td>
									<td class="description last">
										<p>The height of the scissor box in logical pixel unit.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h3 class="name name-method" id="setScissorTest" translate="no">.<a href="#setScissorTest">setScissorTest</a><span class="signature">( boolean : <span class="param-type">boolean</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Defines the scissor test.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>boolean</strong>
									</td>
									<td class="description last">
										<p>Whether the scissor test should be enabled or not.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h3 class="name name-method" id="setSize" translate="no">.<a href="#setSize">setSize</a><span class="signature">( width : <span class="param-type">number</span>, height : <span class="param-type">number</span>, updateStyle : <span class="param-type">boolean</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets the size of the renderer.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>width</strong>
									</td>
									<td class="description last">
										<p>The width in logical pixels.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>height</strong>
									</td>
									<td class="description last">
										<p>The height in logical pixels.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>updateStyle</strong>
									</td>
									<td class="description last">
										<p>Whether to update the <code>style</code> attribute of the canvas or not.</p>
										<p>Default is <code>true</code>.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h3 class="name name-method" id="setViewport" translate="no">.<a href="#setViewport">setViewport</a><span class="signature">( x : <span class="param-type">number | <a href="Vector4.html">Vector4</a></span>, y : <span class="param-type">number</span>, width : <span class="param-type">number</span>, height : <span class="param-type">number</span>, minDepth : <span class="param-type">number</span>, maxDepth : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Defines the viewport.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>x</strong>
									</td>
									<td class="description last">
										<p>The horizontal coordinate for the lower left corner of the viewport origin in logical pixel unit.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>y</strong>
									</td>
									<td class="description last">
										<p>The vertical coordinate for the lower left corner of the viewport origin  in logical pixel unit.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>width</strong>
									</td>
									<td class="description last">
										<p>The width of the viewport in logical pixel unit.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>height</strong>
									</td>
									<td class="description last">
										<p>The height of the viewport in logical pixel unit.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>minDepth</strong>
									</td>
									<td class="description last">
										<p>The minimum depth value of the viewport. WebGPU only.</p>
										<p>Default is <code>0</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>maxDepth</strong>
									</td>
									<td class="description last">
										<p>The maximum depth value of the viewport. WebGPU only.</p>
										<p>Default is <code>1</code>.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				<h2 class="subsection-title">Source</h2>
				<p>
					<a href="https://github.com/mrdoob/three.js/blob/master/src/renderers/common/CanvasTarget.js" translate="no" target="_blank" rel="noopener">src/renderers/common/CanvasTarget.js</a>
				</p>
			</article>
		</section>
<script src="../scripts/linenumber.js"></script>
<script src="../scripts/page.js"></script>
</body>
</html>